<template>
    <div class="white-box">
        <h3 class="xq-h3">{{ objs.title }}</h3>
        <p class="xq-time">发布时间：{{ objs.on_time_lable }}</p>
        <div class="xq-content" v-html="objs.article_content.content" v-if="objs.article_content"></div>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import GoBack from "@components/GoBack.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

onMounted(() => {
    if (route.query.id) {
        getDetail(route.query.id)
    }
})

const objs = ref({})
function getDetail(id) {
    proxy.$axios
        .get("sys/article/detail", {
            params: {
                article_id: id,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                result.article_content.content = result.article_content.content.replace(/<img [^>]*src=['"]/g, `<img src="${proxy.imgUrl}`) // 往图片追加根域名和'/'
                objs.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>

<script>
export default {
    name: "HelpDetail",
}
</script>

<style lang="less" scoped>
.xq-content {
    width: 100%;
}
</style>
